<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <ul>
    <!-- 默认字符串为路径参数 -->
    <li @click="redirectByPath('/')">Home</li>
    <li>
      <!-- 指定参数为路径 -->
      <div @click="redirectByPath('/about')">About</div>
      <ul>
        <!-- 嵌套路由-->
        <li @click="redirectByPath('/about/author')">About - Author</li>
        <!-- 嵌套路由, 动态路由, 当使用path时, params参数不生效 -->
        <li @click="redirectByPath('/about/email', { email: lonelydawn@sina.com' })">About - Email</li>
        <!-- 嵌套路由, 动态路由, 可以直接将参数写入path -->
        <li @click="redirectByPath('/about/email/lonelydawn@sina.com')">About - Email</li>
        <!-- 嵌套路由, 动态路由, 使用命名路由跳转视图 -->
        <li @click="redirectByName('Email', { email: 'singledawn@sina.com' })">About - Email</li>
      </ul>
    </li>
  </ul>
  <router-view></router-view>
</div>
<script type="text/javascript">
  let Home = { template: '<h1>This is Home!</h1>' } // Home组件
  let About = { // About组件
    template: '<div>' + 
    '<h1>This is About!</h1>' + 
    '<router-view></router-view>' +  // 嵌套的动态视图区
    '</div>'
  }
  let Author = { template: '<p>Author: lonelydawn</p>' }
  let Email = { template: '<p>Email: {{ $route.params.email }}</p>' }
  let routes = [ // 定义路由规则, 每一个路由规则应该映射一个视图组件
    { path: '/', component: Home },
    { 
      path: '/about',
      component: About,
      children: [ // 嵌套子路由
        { name: 'Author', path: 'author', component: Author },
        { name: 'Email', path: 'email/:email', component: Email }
      ]
    }
  ]
  let router = new VueRouter({ // 创建VueRouter实例, 并传入routes配置
    routes
  })
  let app = new Vue({
    methods: {
      redirectByPath (path, params) {
        this.$router.push({ path, params })
      },
      redirectByName (name, params) {
        this.$router.push({ name, params })
      }
    },
    router
  }).$mount('#app')
</script>
</body>
</html>